<!--
 * @Date: 2023-03-04 16:02:14
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-03-18 09:43:54
 * @FilePath: \A19\frontend\src\components\FileSystem\UploadFile.vue
-->
<template>
  <el-button @click="dialogVisible = true">上传文件</el-button>
  <el-dialog
    v-model="dialogVisible"
    title="上传文件"
    width="40%"
    :close-on-click-modal="false"
    :show-close="false"
    custom-class="dialog"
  >
    <el-upload
      v-model:file-list="fileList"
      class="upload-demo"
      action="#"
      multiple
      :before-remove="beforeRemove"
      :limit="10"
      :on-exceed="handleExceed"
      :http-request="async () => {}"
    >
      <el-button type="primary">Click to upload</el-button>
      <!-- <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500KB.
        </div>
      </template> -->
    </el-upload>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="upload"> 上传 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { UploadProps, UploadUserFile } from "element-plus/es/components/upload";
import { ref, toRefs, defineProps, watch } from "vue";
import { useClientStore } from "../../pinia/stores/client";
// import { ElLoading } from 'element-plus'
import { file } from "@/shared/types/Folder";

const props = defineProps<{ path: string[], courseId: string,updateFolder:(ret: {
    isSucc: boolean;
    res?: {
        folders: string[];
        files: file[];
    } | undefined;
}) => void }>();
const { path } = toRefs(props);

const { client } = useClientStore();
const dialogVisible = ref(false);
const loading = ref(true)

const fileList = ref<UploadUserFile[]>([]);
const fileDatas = new Array<{
  fileName: string;
  fileData: Uint8Array;
  fileType: string;
}>();

const upload = async () => {
  const loadingInstance = ElLoading.service({
   target:'.dialog',
  })
  if(fileList.value.length === 0) {
    return ElMessage.warning('请选择文件')
  }
  try {
    const pros = fileList.value.map(async (file) => {
      if (file.raw) {
        fileDatas.push({
          fileName: file.raw.name,
          fileType: file.raw.type,
          fileData: new Uint8Array(await file.raw.arrayBuffer()),
        });
        return;
      }
    });
    await Promise.all(pros);

    const ret = await client.callApi("SourceManage/UploadFile", {
      files: fileDatas,
      path: path.value,
      course: props.courseId,
    });
    if (ret.isSucc) {
      loadingInstance.close()
      cancel();
      props.updateFolder(ret)
      // ElMessage.success("上传成功");
    }
  } catch (error) {
    if (error instanceof Error){
      loadingInstance.close()
      ElMessage.error(error.message);
    }
  }
};
const handleExceed = () => {
  ElMessage.warning("最多一次性上传10个文件");
};

const beforeRemove: UploadProps["beforeRemove"] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(`确定移除 ${uploadFile.name} 吗?`).then(
    () => true,
    () => false
  );
};
const cancel = () => {
  fileList.value.length = 0;
  fileDatas.length = 0;
  dialogVisible.value = false;
};
</script>

<style lang="less" scoped></style>
